<template>
  <div class="editAddressBox">
    <div class="editArea itemStyle">
      <span><i>*</i>所在地区：</span>
      <div class="rightForm">
        <el-cascader
          size="large"
          :options="options"
          v-model="areaCode"
          @change="addressChange" />
      </div>
    </div>
    <div class="itemStyle">
      <span><i>*</i>详细地址：</span>
      <div class="rightForm">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入地址"
          resize="none"
          v-model="newAddress.address"
          maxlength="60" />
      </div>
    </div>
    <div class="itemStyle">
      <span><i>*</i>收货人姓名：</span>
      <div class="rightForm">
        <el-input v-model="newAddress.name" maxlength="20" placeholder="请输入内容" />
      </div>
    </div>
    <div class="itemStyle">
      <span><i>*</i>手机号码：</span>
      <div class="rightForm">
        <el-input v-model="newAddress.phone" maxlength="11" placeholder="请输入内容" />
      </div>
    </div>
    <div class="itemStyle">
      <span></span>
      <div class="rightForm">
        <el-checkbox v-model="newAddress.isDefault">设置为默认收货地址</el-checkbox>
      </div>
    </div>
    <div class="dialogFooter">
      <el-button type="primary" @click="handleNewAddressData">确 定</el-button>
      <el-button @click="cancelAdd">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  name: 'ChangeAddress',
  setup (props, { emit }) {
    let newAddress = reactive({
      isDefault: false,
      name: '',
      area: '',
      address: '',
      phone: '',
      isShow: false
    })

    function addressChange (arr) {
      newAddress.value.area = `${CodeToText[arr[0]]}-${CodeToText[arr[1]]}-${CodeToText[arr[2]]}`
    }

    function handleNewAddressData () {
      if (newAddress.value.area === '') {
        ElMessage.error('请选择地区!')
      } else if (newAddress.value.area === '') {
        ElMessage.error('请选择地区!')
      } else if (newAddress.value.address === '') {
        ElMessage.error('请填写详细地址!')
      } else if (newAddress.value.phone === '') {
        ElMessage.error('请填写手机号码!')
      } else {
        emit('hideAddDialog', newAddress.value)
        newAddress.value = {
          isDefault: false,
          name: '',
          area: '',
          address: '',
          phone: ''
        }
      }
    }

    function cancelAdd () {
      emit('cancelAdd')
    }
    return {
      regionData,
      newAddress,
      addressChange,
      handleNewAddressData,
      cancelAdd,
    }
  }
})
</script>

<style lang="scss" scoped>
.editAddressBox {
  padding: 0 100px;
  .itemStyle {
    display: flex;
    margin-bottom: 20px;
    span {
      width: 100px;
      margin-right: 20px;
      text-align: right;
      padding-top: 5px;
    }
    i {
      color: red;
      margin-right: 3px;
    }
    .rightForm {
      flex: 1;
      :deep(.el-cascader){
        width: 100%;
      }
      :deep(.el-checkbox__label){
        font-size: 12px;
        color: #666666;
      }
    }
  }
  .dialogFooter {
    display: flex;
    justify-content: center;
    width: 100%;
    button {
      height: 25px;
      width: 120px;
    }
  }
  :deep(.icon-arrow-down::before) {
    display: none;
  }
}
</style>
